<script setup lang='ts'>
import { ContentWrap } from '@fl/origin-components/ContentWrap'
import { useUserStore } from '@fl/store/modules/user'
import { ElDivider, ElSkeleton, ElTabPane, ElTabs } from 'element-plus'

import ChangeAdmin from './components/ChangeAdmin.vue'
import ChangeMobile from './components/ChangeMobile.vue'

const activeName = ref('first')

const userInfo = useUserStore().getUserInfo
const isLoading = ref(false)
</script>

<template>
    <div class="p-[var(--app-content-padding)] bg-[var(--app-content-bg-color)] flex-1 w-full dark:bg-[var(--el-bg-color)]">
        <div class="flex size-full h-85vh"
             style="width: 1300px; margin: 0 auto; "
        >
            <ContentWrap title="个人信息"
                         class="w-400px"
            >
                <ElSkeleton v-if="isLoading"
                            animated
                />

                <template v-else>
                    <div class="flex justify-between items-center">
                        <div>账号</div>

                        <div>{{ userInfo?.sysUser?.userName }}</div>
                    </div>

                    <ElDivider />

                    <div class="flex justify-between items-center">
                        <div>昵称</div>

                        <div>{{ userInfo?.sysUser?.nickName }}</div>
                    </div>

                    <ElDivider />

                    <div class="flex justify-between items-center">
                        <div>手机号码</div>

                        <div>{{ userInfo?.sysUser?.phonenumber ?? '-' }}</div>
                    </div>

                    <ElDivider />

                    <div class="flex justify-between items-center">
                        <div>用户邮箱</div>

                        <div>{{ userInfo?.sysUser?.email || '-' }}</div>
                    </div>

                    <ElDivider />

                    <div class="flex justify-between items-center">
                        <div>角色</div>

                        <div>{{ userInfo?.sysUser?.roleName || '-' }}</div>
                    </div>
                </template>
            </ContentWrap>

            <ContentWrap title="基本资料"
                         class="ml-20px flex-[3]"
            >
                <ElTabs v-model="activeName">
                    <ElTabPane label="修改手机号"
                               name="first"
                    >
                        <ChangeMobile />
                    </ElTabPane>

                    <ElTabPane v-if="userInfo?.sysUser?.roles?.[0]?.roleKey === 'supplier'"
                               label="管理员变更"
                               name="second"
                    >
                        <ChangeAdmin />
                    </ElTabPane>
                </ElTabs>
            </ContentWrap>
        </div>
    </div>
</template>

<style lang="less" scoped>
.avatar {
    position: relative;

    &::after {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 100%;
        font-size: 50px;
        color: #fff;
        background-color: rgb(0 0 0 / 40%);
        border-radius: 50%;
        content: '+';
        opacity: 0;
        justify-content: center;
        align-items: center;
    }

    &:hover {
        &::after {
            opacity: 1;
        }
    }
}
</style>
